<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
   	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
	<title>菜单管理</title>
    <link href="<%=request.getContextPath()%>/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="<%=request.getContextPath()%>/js/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.js" type="text/javascript"></script>  
    
        
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrapValidator.css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrapValidator.js"></script>
    
    
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/lhdialog/lhgcore.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/lhdialog/lhgdialog.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/OpenDialog.js"></script>
    
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/CheckTheData.js"></script>

    <script type="text/javascript">
  //选择界面（弹出框）
    function choose(entity){
	  	var flag;
	  	var pojo=entity;
	  	var page;
	  	
	  	if(pojo=='brandShow'){
	  		flag =1;
	  	    page = 	"<%=request.getContextPath()%>/brandShow/BrandShow_findBrandsByCategory.action?params=choose&categoryId=${t.category.id}";
        }
	  	if(pojo=='productAttr'){
	  		flag =1;
	  		//属性改变属性标准值就要置空重选
	  		$("#attrStandardValue").val("");
	  	    page = 	"<%=request.getContextPath()%>/productAttr/ProductAttr_listByPage.action?params=choose&t1.category.id=${t.category.id}";
        }
        if(pojo=='productAttrDict'){
        	//先选择属性再选属性值
        	var productAttrId = $("#productAttrId").val();
            if(productAttrId!=null && productAttrId!=""){
            	flag =1;
        	    page = 	"<%=request.getContextPath()%>/productAttrDict/ProductAttrDict_listByPage.action?params=choose&t1.productAttr.id="+productAttrId;
            }else{
            	alert("请先选择属性")
            }
        }
	  	if(flag == 1){
	  		var titleText = "";
	  		PUBLICOBJECT.id = "entid";
	  		PUBLICOBJECT.title = titleText;
	  		PUBLICOBJECT.width = "1000";
	  		PUBLICOBJECT.height = "auto";
	  		PUBLICOBJECT.titleText = titleText;
	  		PUBLICOBJECT.page = page;
	  		var rs = PUBLICOBJECT.openLab();
	  		rs.ShowDialog();// 打开弹出窗
	  		var dom = window.frames["lhgfrm_" + PUBLICOBJECT.id];// 弹出框document对象
	  		rs.addBtn(PUBLICOBJECT.id, "确定", function() {
	  			var _choose = $(dom.document).find("input[name='idChoose']:checked");
	  			var chooseValue = _choose.val();
	  			if(chooseValue != null){
	  				rs.cancel();// 关闭当弹出窗
	  				var chooseName = _choose.siblings("input[name='nameChoose']").val();
	  				
	  				if(pojo=='brandShow'){
	  			    	$("#brandShowId").val(chooseValue);
	  			    	$("#brandShowName").val(chooseName);
	  			    	$("#brandShowName").trigger("onchange");
	  		        }
	  		        if(pojo=='productAttr'){
	  			    	$("#productAttrId").val(chooseValue);
	  			    	$("#productAttrName").val(chooseName);
	  			    	$("#productAttrName").trigger("onchange");
	  		        }
	  		        if(pojo=='productAttrDict'){
	  			    	$("#attrStandardValue").val(chooseName);
	  			    	$("#attrStandardValue").trigger("onchange");
	  		        }
	  			}else{
	  				alert("请选择一项");
	  			}
	  		}, "left");
	  	}
  }
    
    var num=0;
    //添加需要命名属性行
    function addPartakeNameAttr(){
    	
    	var html="";
    	html += "<div class='form-group' id='row"+num+"'>";
    	html += "  <div class='col-sm-offset-4 col-sm-2'>";
    	html += "    <input class='form-control' type='text' name='partakeNameAttrNameList' id='partakeNameAttrNameList"+num+"' readonly='readonly' value=''>";
    	html += "    <input type='hidden' name='partakeNameAttrIdList' id='partakeNameAttrIdList"+num+"'>";
    	html += "  </div>";
    	html += "  <div class='col-sm-1'>";
    	html += "    <input class='form-control' type='button' name='choAttr' value='选择命名属性' onclick='chooseAttr("+num+")'>";
    	html += "  </div>";
		  
    	html += "  <label class='col-sm-1 control-label'>属性类型：</label>";
    	html += "  <div class='col-sm-1'>";
    	html += "       <select class='form-control' name='typeList'>";
    	html += "           <option value='1'>标准值</option>";
    	html += "           <option value='2'>简称</option>";
    	html += "       </select>";
    	html += "  </div>";
    	html += "  <div class='col-sm-1'>";
    	html += "    <input class='form-control btn-danger' type='button' name='delRow' value='删除' onclick='deleteRow(\"row"+num+"\")'>";
    	html += "  </div>";
    	html += "</div>";
    	num++;
    	$("#affirmMng").before(html);
    	$("#affirm").css("display","");
    }
    
    function deleteRow(id){
    	$("#"+id).remove();
    }
    
    //选择需要命名的属性
    function chooseAttr(num){
    	var flag=1;
	  	var page = 	"<%=request.getContextPath()%>/productAttr/ProductAttr_listByPage.action?params=choose&t1.category.id=${t.category.id}";
	  	if(flag == 1){
	  		var titleText = "";
	  		PUBLICOBJECT.id = "entid";
	  		PUBLICOBJECT.title = titleText;
	  		PUBLICOBJECT.width = "1000";
	  		PUBLICOBJECT.height = "auto";
	  		PUBLICOBJECT.titleText = titleText;
	  		PUBLICOBJECT.page = page;
	  		var rs = PUBLICOBJECT.openLab();
	  		rs.ShowDialog();// 打开弹出窗
	  		var dom = window.frames["lhgfrm_" + PUBLICOBJECT.id];// 弹出框document对象
	  		rs.addBtn(PUBLICOBJECT.id, "确定", function() {
	  			var _choose = $(dom.document).find("input[name='idChoose']:checked");
	  			var chooseValue = _choose.val();
	  			if(chooseValue != null){
	  				rs.cancel();// 关闭当弹出窗
	  				var chooseName = _choose.siblings("input[name='nameChoose']").val();
	  				
	  			    	$("#partakeNameAttrIdList"+num).val(chooseValue);
	  			    	$("#partakeNameAttrNameList"+num).val(chooseName);
	  			}else{
	  				alert("请选择一项");
	  			}
	  		}, "left");
	  	}
    }
    
    
    var flag=false;//用来判断是否触发了确认按钮
    //点击确认后不可再添加和删除，并拼接type，partakeNameAttr等字符串
    function affirmAttr(){
    	//① 添加属性按钮消失
    	$("#addAttr").css("display","none");
    	//所有选择属性按钮消失
    	$("input[name='choAttr']").each(function(){
    		$(this).css("display","none");
    	});
    	//所有删除按钮消失
    	$("input[name='delRow']").each(function(){
    		$(this).css("display","none");
    	});
    	
    	
    	//② 拼接需要命名规则的属性名字字符串
    	var partakeNameAttrNames="";
    	$("input[name='partakeNameAttrNameList']").each(function(){
    		var attrName = $(this).val();
    		if(attrName!=null && attrName!=""){
    			//拼接字符串
    			partakeNameAttrNames += attrName+",";
    		}else{
    			//把空行删掉
    			var attrId = $(this).attr("id");
    			var number = attrId.substring(23);
    			$("#row"+number).remove();
    		}
    	});
    	partakeNameAttrNames = partakeNameAttrNames.substring(0,partakeNameAttrNames.lastIndexOf(","));
    	
    	//拼接需要命名规则的属性Id字符串
    	var partakeNameAttrIds="";
    	$("input[name='partakeNameAttrIdList']").each(function(){
    		var attrId = $(this).val();
    		if(attrId!=null && attrId!=""){
    			partakeNameAttrIds += attrId+",";
    		}
    	});
    	partakeNameAttrIds = partakeNameAttrIds.substring(0,partakeNameAttrIds.lastIndexOf(","));
    	$("#partakeNameAttrId").val(partakeNameAttrIds);
    	
    	//拼接需要命名规则的type字符串
    	var types="";
    	$("select[name='typeList']").each(function(){
    		var t = $(this).val();
    		if(t!=null && t!=""){
    			types += t+",";
    		}
    	});
    	types = types.substring(0,types.lastIndexOf(","));
    	$("#type").val(types);
    	
    	
    	
    	
    	//③ 拼接模板要显示的内容
    	var names = partakeNameAttrNames.split(",");
    	
    	var html="";
    	for(var i=0;i<names.length;i++){
    		html += "<div class='col-sm-4'>";
    		html += "    <input type='text' class='form-control' name='theBox'>";
    		html += "</div>";
    		html += "<label class='col-sm-2 control-label' style='text-align:center'>[ "+names[i]+" ]</label>";
    	}
    	html += "<div class='col-sm-4'>";
		html += "    <input type='text' class='form-control' name='theBox'>";
		html += "</div>";
    	$("#templateMng").html(html);
    	
    	flag=true;
    }
    
    
    function readySubmit(){
    	if(checkString("categoryName","类别不能为空") 
 		&& checkString("brandShowName","品牌不能为空")
  	  	){ 
	    	if(flag){
		    	jointData();//拼接要提交模板的信息
		    	$("#defaultForm").submit();
	    	}else{
	    		alert("请选择并确认参与命名的属性")
	    	}
    	} 
    }
    
    
    function jointData(){
    	var ids = $("#partakeNameAttrId").val();
    	ids = ids.split(",");
    	
    	
    	var contents=new Array();
    	$("input[name='theBox']").each(function(){
    		var cc = $(this).val();
    		contents.push(cc);
    	});
    	
    	//把input框中的信息和属性Id拼接出模板信息
    	var temps="";
    	for(var i=0;i<contents.length-1;i++){
    		temps += contents[i]+"{:"+ids[i]+":}";
    	}
    	temps += contents[contents.length-1];
	    if(temps=='undefined'){
	    	$("#template").val("");
	    }else{
	    	$("#template").val(temps);
	    }
    }
    </script>
</head>
<body>
<div class="panel panel-primary">
  <div class="panel-heading">商品命名规则管理</div>
  <div class="panel-body">
    
	  <form id="defaultForm" class="form-horizontal" action="<%=request.getContextPath()%>/nameProductRule/NameProductRule_save.action?page=${page }" method="post">
		  <input type="hidden" name="t1.category.id" value="${t1.category.id}">
		  <input type="hidden" name="t1.category.name" value="${t1.category.name}">
		  
		  <div class="form-group">
			  <label for="" class="col-sm-offset-2 col-sm-2 control-label" id="categoryNameMng">类别名称：</label>
			  <div class="col-sm-2">
	              <input class="form-control" type="text" name="t.category.name" id="categoryName" readonly="readonly" value="${t.category.name }">
	              <input type="hidden" name="t.category.id" id="categoryId" value="${t.category.id}">
	              <div class="check" style="color:#a94442;font-size:85%"><span class="checkMsg"></span></div>
			  </div>
		  </div>
	
		  <div class="form-group">
			  <label for="" class="col-sm-offset-2 col-sm-2 control-label" id="brandShowNameMng">选择品牌：</label>
			      <div class="col-sm-2">
	                  <input value="${t.brandShow.name }" class="form-control" type="text" name="t.brandShow.name" id="brandShowName" readonly="readonly" onchange="checkName('brandShowName')">
	                  <input type="hidden" name="t.brandShow.id" id="brandShowId" value="${t.brandShow.id}">
	                  <div class="check" style="color:#a94442;font-size:85%"><span class="checkMsg"></span></div>
			      </div>
			      <div class="col-sm-1">
	                  <input class="form-control" type="button" value="选择品牌" onclick="choose('brandShow')">
			      </div>
		  </div>
		     
		     
		  <div class="form-group">
			  <label for="" class="col-sm-offset-2 col-sm-2 control-label" id="productAttrNameMng">选择属性：</label>
			     <div class="col-sm-2">
	                <input class="form-control" type="text" name="t.productAttr.name" id="productAttrName" readonly="readonly" value="${t.productAttr.name }" onchange="checkName('productAttrName')">
	                <input type="hidden" name="t.productAttr.id" id="productAttrId" value="${t.productAttr.id}">
	                <div class="check" style="color:#a94442;font-size:85%"><span class="checkMsg"></span></div>
			     </div>
			     <div class="col-sm-1">
	                <input class="form-control" type="button" value="选择属性" onclick="choose('productAttr')">
			     </div>
		  </div>
		  
		  <!-- 选择该属性下的属性值 -->
		  <div class="form-group">
			  <label class="col-sm-offset-2 col-sm-2 control-label">选择属性标准值：</label>
			     <div class="col-sm-2">
	                <input class="form-control" type="text" name="t.attrStandardValue" id="attrStandardValue" readonly="readonly" value="${t.attrStandardValue }" onchange="checkName('attrStandardValue')">
			        <div class="check" style="color:#a94442;font-size:85%"><span class="checkMsg"></span></div>
			     </div>
			     <div class="col-sm-1">
	                <input class="form-control" type="button" value="选择属性标准值" onclick="choose('productAttrDict')">
			     </div>
		  </div>
		  
		  <hr>
		  
		  <div class="form-group">
			  <label class="col-sm-offset-2 col-sm-2 control-label">参与命名的属性：</label>
              <div class="col-sm-2">
                  <input class="form-control" type="button" id="addAttr" value="添加命名属性" onclick="addPartakeNameAttr()">
		      </div>
		  </div>
		  
		  <div class="form-group"  id="affirmMng">
		      <div class="col-sm-offset-4 col-sm-1">
                  <input class="form-control btn-warning" type="button" id="affirm" value="确认" onclick="affirmAttr()" style="display:none">
		      </div>
		  </div>
		  
		  <input type="hidden" id="type" name="t.type" value="${t.type}">  
		  <input type="hidden" id="partakeNameAttrId" name="t.partakeNameAttr" value="${t.partakeNameAttr}">
		  <input type="hidden" id="template" name="t.template" value="${t.template}">
		  
		  <c:if test="${!empty method}" >
	          <input name="method" type="hidden" value="${method }">
			  <input type="hidden" name="t.id" value="${t.id}">
			  
			  <div class="form-group">
				  <label class="col-sm-offset-2 col-sm-2 control-label">原有模板：</label>
				  <label class="col-sm-5 control-label" style="text-align:left;font-weight: normal;">${oldTemplate }</label>
			  </div>
		  </c:if>
		  
		  <div class="form-group">
			  <label for="" class="col-sm-offset-2 col-sm-2 control-label">模板：</label>
			  <div class="col-sm-5" id="templateMng">
			  </div>
		  </div>
			 
		  <div class="form-group">
		      <div class="col-sm-offset-5 col-sm-7">
		          <button type="button" class="btn btn-default" onclick="readySubmit()">提交</button>
		          <button type="reset" class="btn btn-default">重置</button>
		      </div>
		  </div>
	  </form>
    
  </div>
  
</div>

</body>
</html>
